<template>
	<view class="container">
		<u-subsection :list="types" mode="subsection" :current="current" @change="sectionChange"></u-subsection>
		<!-- 商家宣传 -->
		<view class="publicity">
			<u-swiper
				:list="images"
				@change="e => currentNum = e.current"
				:autoplay="false"
				indicatorStyle="right: 20px"
			>
				<view
					slot="indicator"
					class="indicator-num"
				>
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ images.length }}</text>
				</view>
			</u-swiper>
			<view class="buy">
				<view style="width: 100px;margin-right: 10px;">
					<u-button type="primary" :hairline="true" shape text="加入购物车" @click="goBuy" />
				</view>
				<view style="width: 100px;">
					<u-button type="warning" :hairline="true" shape text="立即购买" @click="goBuy" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				images: [
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				currentNum: 0,
				types: ['冲洗打印', '相册定制', '摆台定制'],
				urls: [
					'/Self-rinse/rinse/defaultPrint',
					'/Self-rinse/rinse/albumCustomer',
					'/Self-rinse/rinse/tableCustomer',
				],
				current: 0
			}
		},
		onLoad(e) {
			this.current = e.num || 0
		},
		methods: {
			sectionChange(index) {
				this.current = index;
			},
			goBuy() {
				uni.navigateTo({
					url: this.urls[this.current]
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 0 15px;
		
		.publicity {
			margin-top: 20rpx;
			padding: 10px;
			border-radius: 10px;
			background-color: darkgray;
			
			.indicator-num {
				padding: 2px 0;
				background-color: rgba(0, 0, 0, 0.35);
				border-radius: 100px;
				width: 35px;
				@include flex;
				justify-content: center;
		
				&__text {
					 color: #FFFFFF;
					 font-size: 12px;
				 }
			}
			
			.buy {
				margin-top: 10px;
				display: flex;
				justify-content: flex-end;
			}
		}
	}
</style>